import { Col, Row } from 'antd'
import React from 'react'
import Layout from './Layout'
import { useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { get_product_by_id } from '../../store/actions/productDetail'
import ProductItem from './ProductItem'

export default function ProductDetail() {
	// 因为路由绑定的/product/:productId, 所以通过useParams来获取
	const { productId } = useParams()
	const dispatch = useDispatch()

	useEffect(() => {
		dispatch(get_product_by_id({productId}))	
	}, []) // eslint-disable-line react-hooks/exhaustive-deps
	
	const productDetail = useSelector(state => state.productDetail)
	return (
		<>
			<Layout title='商品名称' subTitle="商品描述">
				<Row>
					<Col span={18}>
						{
							Object.keys(productDetail).length >0 && (
								<ProductItem product={productDetail} showView={false} imgStyle={{margin:"0 auto", width: "50%"}}></ProductItem>
							)
						}
					</Col>
					<Col span={6}></Col>
				</Row>
			</Layout>
		</>
	)
}
